<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<table cellpadding="2" cellspacing="2" border="0"  id="tblProject">
    <tr>
        <td id="start" width="100" height="24" bgcolor="#BFBFBF"></td>
    </tr>
</table>
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #003DFF; display: none; font-weight: bold; opacity: 0.3; position: absolute; z-index: 99; " id="pop">&nbsp;<a id="tool-left">+</a>&nbsp;&nbsp;&nbsp;&nbsp;<a id="tool-right">+</a>&nbsp;</div>
<script src="jquery.js"></script>
<script type="text/javascript">
//google.load("jquery", "1");
$("#start").hover(
    function(){
        var offset = $(this).offset();
        var position = $(this).position();
        var h = $(this).height();
        var w = $(this).width();
        $("#pop").css("top", offset.top + position.top - 7);
        $("#pop").css("left", offset.left + position.left + w - 2);
        $("#pop").css("display","block");
        $("#tool-left").unbind('click');        
        $("#tool-left").click(
            function () {
                var newTr = $("#tblProject").get(0).insertRow(1);
                var newTd = newTr.insertCell(-1);
                newTd.width = 100;
                newTd.bgColor = "#BFBFBF"
                newTd.innerText= '项目';
                //newTd.ondblclick = editCell;
            });
        $("#tool-right").click(function () {alert('fsf')});
        //$("#tool-left").click(null);
    },
    function() {
        setTimeout('$("#pop").css("display", "none")', 5000);
    })

function editCell(event){
     var input = document.createElement("input");
    input.type="text";
    if(event==null)
    {
         currentCell=window.event.srcElement;
    }
    else
    {
         currentCell=event.target;
    }
    if(currentCell.tagName=="TD"){
        //用单元格的值来填充文本框的值
        input.value=currentCell.innerHTML;
        //当文本框丢失焦点时调用
        input.onblur = function () {
            //充文本框的值给当前单元格
            currentCell.innerHTML = input.value;
            input = null;
         };
        //当文本框按回车时调用
         input.onkeypress = function (event) {
            //充文本框的值给当前单元格
            if(event.keyCode==13){   
                 input.onblur = null;
                 currentCell.innerHTML = input.value;
                 input = null;
            }
         };
        currentCell.innerHTML="";
        //把文本框加到当前单元格上.
        currentCell.appendChild(input);
        //根据liu_binq63 的建议修定下面的bug 非常感谢
        input.focus();
     }
}

function btnAddColClicked() {
    for (var i=0; i<tblProject.rows.length; i++) {
        var newTd = tblProject.rows[i].insertCell(-1);
        newTd.width = 100;
        newTd.align="center";
        if (i == 0) {
            newTd.bgColor = "#BFBFBF"
            newTd.innerText= '日期';
            newTd.ondblclick = editCell;
        }
        else {
            newTd.bgColor = "#FFFF00"
            newTd.innerText= '';
        }
    }
}

function btnAddRowClicked() {
    var newTr = tblProject.insertRow(-1);
    for (var i=0; i<tblProject.rows[0].cells.length; i++) {
        var newTd = newTr.insertCell(-1);
        newTd.width = 100;
        if (i == 0) {
            newTd.bgColor = "#BFBFBF"
            newTd.innerText= '项目';
            newTd.ondblclick = editCell;
        }
        else {
            newTd.bgColor = "#FFFF00"
            newTd.innerText= '';
        }
    }
}
</script>
<input type=button value="增加项目" id="btnAddRow" onClick="btnAddRowClicked()">
<input type=button value="增加日期" id="btnAddCol" onClick="btnAddColClicked()">
</body>
</html>